import React, { useRef } from "react";
import { useFormField } from "../../context/form-context";
import { marked } from "marked";
import useComponentWidth from "../../lifecycle/useComponentWidth";

let defaultConfig = {
  //这一批属性来源 tplData.form.data_control （步骤权限）
  // "code": "markdown",
  // "name": "markdown",
  // "type": "mark_down",
  // "is_show": true,
  // "is_editable": false,
  // "is_required": false,

  //这一批属性来源 tplData.form.form_meta_data （表单设计器）
  // "isUsed": false,
  // "designProps": {
  //   "code": "markdown",
  //   "name": "markdown",
  //   "ui": "wfd_markdown",
  //   "title": "markdown",
  //   "layout": "control_layout_leftRight",
  //   "defaultValue": "",
  //   "text": "",
  //   "groupTitle": "",
  //   "byTableGroupTitle": false,
  //   "tipstext": true,
  //   "type": "mark_down",
  //   "title_w": 85
  // },
  
  //这一批属性来源 tplData.form.data_define （业务对象）
  // "show_type": "",
  // "show_type_name": "",
  // "props": {
  //   "source_type": "sql"
  // },
  // "type_name": "Markdown",
  
  //来源 tplData.form.defaultValueConf
  // "default": null
}

export default function ({ field, label, rules, showLabel = true, required, labelCol, cell, rowIndex, ...others }) {

  const { input } = useFormField({ field, rules });
  let wrapperRef=useRef();
  let width=useComponentWidth(wrapperRef)

  function getDataText(value) {
    if (value === null) {
      return null;
    }
    value = marked.parse(value); //把mark语法转为html
    return <div style={{width}} ref={wrapperRef} dangerouslySetInnerHTML={{ __html: value }}></div>;
  }
  return input.value === undefined ? null : getDataText(input.value);
}
